<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //先定义发布订阅者pubsub消息处理信息,指定发布订阅者逻辑信息
        class PubSub{
            constructor(){
                //发布者
                this.message = {};
                // 订阅者
                this.listeners = {};
            }
            //添加发布者
            publish(type,content){
                let existMessage = this.message[type];
                //如果消息不存在的化，数组设置为空，添加发布者信息。
                if(!existMessage){
                    this.message[type] = [];
                }
                this.message[type].push(content);
            }

            //添加数据的订阅者的逻辑
            subscribe(type,cb){
                let exisListener = this.listeners[type];
                if(!exisListener){
                    this.listeners[type] = [];
                }
                //添加订阅者的数据信息
                this.listeners[type].push(cb);
            }

            // 开启通知的模式信息
            notify(type){
                let messages = this.message[type];
                let subscribes = this.listeners[type] || [];

                subscribes.forEach((cb,index) => cb(messages[index]));
            }
        }

        //发布者消息如下所示：
        class Publisher{
            constructor(name,context){
                this.name = name;
                this.context = context;
            }

            publish(type,content){
                this.context.publish(type,content)
            }
        }
        //订阅者消息如下所示：
        class Subscriber{
            constructor(name,context){
                this.name = name;
                this.context = context;
            }

            subscribe(type,cb){
                this.context.subscribe(type,cb);
            }
        }

        //开始实际操作信息
        const TYPE_A = "music";
        const TYPE_B = "movie";
        const TYPE_C = "novel";//小说
        
        //开始操作发布者操作
        let pubsub = new PubSub();

        //发布了三个事件的操作
        let publishA = new Publisher("publishA",pubsub);
        publishA.publish(TYPE_A,"曹操");
        let publishB = new Publisher("publishB",pubsub);
        publishB.publish(TYPE_B,"肖申克的救赎");
        let publishC = new Publisher("publishC",pubsub);
        publishC.publish(TYPE_C,"红楼梦");


        let subcribeA = new Subscriber("subcribeA",pubsub);
        subcribeA.subscribe(TYPE_A,res=>{
            console.log("接受到数据",res);
        })
        let subcribeB = new Subscriber("subcribeB",pubsub);
        subcribeB.subscribe(TYPE_B,res=>{
            console.log("订阅者B接收数据",res);
        })
        let subcribeC = new Subscriber("subcribeB",pubsub);

        subcribeC.subscribe(TYPE_C,res=>{
            console.log("订阅者C接受数据",res);
        })

        console.log(pubsub.message,pubsub.listeners)


        //通知消息发布订阅者进行数据处理
        pubsub.notify(TYPE_A);
        pubsub.notify(TYPE_B);
    </script>
</body>
</html>